﻿
<AntTitle Level="1">Button 按钮</AntTitle>
<AntText>按钮用于开始一个即时操作</AntText>
<AntTitle Level="2">何时使用</AntTitle>
<AntParagraph>标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。</AntParagraph>
<AntParagraph>在 Ant Design 中，我们有四种按钮。</AntParagraph>
<AntParagraph>
    <ul>
        <li>主按钮：用于主行动点，一个操作区域只能有一个主按钮。</li>
        <li>默认按钮：用于没有主次之分的一组行动点。</li>
        <li>虚线按钮：常用于添加操作。</li>
        <li>链接按钮：用于次要或外链的行动点。</li>
    </ul>
</AntParagraph>
<AntParagraph>以及四种状态属性与上面配合使用。</AntParagraph>
<AntParagraph>
    <ul>
        <li>危险：删除/移动/修改权限等危险操作，一般需要二次确认。</li>
        <li>幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。</li>
        <li>禁用：行动点不可用的时候，一般需要文案解释。</li>
        <li>加载中：用于异步操作等待反馈的时候，也可以避免多次提交。</li>
    </ul>
</AntParagraph>
<br />
<h2>演示</h2>
<br />
<DemoCard>
    <Title>按钮类型 Type</Title>
    <Description>按钮有四种类型：主按钮、次按钮、虚线按钮和链接按钮。主按钮在同一个操作区域最多出现一次。</Description>
    <Demo>
        <AntButton Type="@AntButtonType.Primary">Primary</AntButton>
        <AntButton>Default</AntButton>
        <AntButton Type="@AntButtonType.Dashed">Dashed</AntButton>
        <AntButton Type="@AntButtonType.Link">Link</AntButton>
    </Demo>
</DemoCard>
<br />
<DemoCard>
    <Title>图标按钮 Icon</Title>
    <Description>
        <AntParagraph>当需要在<AntText Code>Button</AntText>内嵌入 <AntText Code>Icon</AntText> 时，可以设置 <AntText Code>Icon</AntText> 属性，或者直接在 <AntText Code>Button</AntText> 内使用 <AntText Code>Icon</AntText> 组件。</AntParagraph>
        <AntParagraph>如果想控制 <AntText Code>Icon</AntText> 具体的位置，只能直接使用 <AntText Code>Icon</AntText> 组件，而非 <AntText Code>Icon</AntText> 属性。</AntParagraph>
    </Description>
    <Demo>
        <AntButton Type="primary" Shape="circle" Icon="search" />
        <AntButton Type="primary" Icon="search">Search</AntButton>
        <AntButton Shape="circle" Icon="search" />
        <AntButton Icon="search">Search</AntButton>
        <br />
        <AntButton Shape="circle" Icon="search" />
        <AntButton Icon="search">Search</AntButton>
        <AntButton Type="dashed" Shape="circle" Icon="search" />
        <AntButton Type="dashed" Icon="search">Search</AntButton>
    </Demo>
</DemoCard>
<br />
<DemoCard>
    <Title>按钮尺寸 Size</Title>
    <Description>
        <AntParagraph>按钮有大、中、小三种尺寸。</AntParagraph>
        <AntParagraph>通过设置 <AntText Code>size</AntText> 为 <AntText Code>large</AntText> <AntText Code>small</AntText> 分别把按钮设为大、小尺寸。若不设置 <AntText Code>size</AntText>，则尺寸为中。</AntParagraph>
    </Description>
    <Demo>
        <div>
            <AntButton Size="@AntButtonSize.Small" Type="@(size.Equals(AntButtonSize.Small) ? AntButtonType.Primary : AntButtonType.Default)" @onclick="@(()=> OnClick(AntButtonSize.Small))">
                Small
            </AntButton>
            <AntButton Type="@(size.Equals(AntButtonSize.Default) ? AntButtonType.Primary : AntButtonType.Default)" @onclick="@(()=> OnClick(AntButtonSize.Default))">
                Default
            </AntButton>
            <AntButton Size="@AntButtonSize.Large" Type="@(size.Equals(AntButtonSize.Large) ? AntButtonType.Primary : AntButtonType.Default)" @onclick="@(()=> OnClick(AntButtonSize.Large))">
                Large
            </AntButton>
        </div>
        <br />
        <div>
            <AntButton Size="@size"> Default </AntButton>
            <AntButton Size="@size" Type="@AntButtonType.Primary">Primary</AntButton>
            <AntButton Size="@size" Type="@AntButtonType.Dashed">Dashed</AntButton>
            <AntButton Size="@size" Type="@AntButtonType.Link">Link</AntButton>
        </div>
    </Demo>
</DemoCard>

@code {
    string size = AntButtonSize.Default;
    void OnClick(string s)
    {
        size = s;
    }
}

<br />
<DemoCard>
    <Title>加载中状态 Loading</Title>
    <Description>添加 <AntText Code>Loading</AntText> 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。</Description>
    <Demo>
        <AntButton Type="primary" Loading>
            Loading
        </AntButton>
        <AntButton Type="primary" size="small" Loading>
            Loading
        </AntButton>
        <br />
        <AntButton Type="primary" Loading=@(Loading) OnClick="(_)=> enterLoading()">
            Click me!
        </AntButton>
        <AntButton Type="primary"
                   Icon="poweroff"
                   Loading="IconLoading"
                   OnClick="()=>enterIconLoading()">
            Click me!
        </AntButton>
        <br />
        <AntButton Shape="circle" Loading />
        <AntButton Type="primary" Shape="circle" Loading />
    </Demo>
</DemoCard>

@code{
    private bool Loading = false;
    void enterLoading()
    {
        Loading = !Loading;
    }
    private bool IconLoading = false;
    void enterIconLoading()
    {
        IconLoading = !IconLoading;
    }
}

<br />

<DemoCard>
    <Title>Block 按钮</Title>
    <Description><AntText Code>block</AntText> 属性将使按钮适合其父宽度。</Description>
    <Demo>
        <AntButton Type="primary" block> Primary </AntButton>
        <AntButton block>Default</AntButton>
        <AntButton Type="dashed" block> Dashed </AntButton>
        <AntButton Type="danger" block> Danger </AntButton>
        <AntButton Type="link" block> Link </AntButton>
    </Demo>
</DemoCard>
<br />
<DemoCard>
    <Title>Ghost Button</Title>
    <Description>幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。</Description>
    <Demo>
        <div style="background-color: rgb(190,200,200); padding: 26px 16px 16px;">
            <AntButton Type="primary" Ghost>Primary</AntButton>
            <AntButton Ghost>Default</AntButton>
            <AntButton Type="dashed" Ghost>Dashed</AntButton>
            <AntButton Type="danger" Ghost>danger</AntButton>
            <AntButton Type="link" Ghost>link</AntButton>
        </div>
    </Demo>
</DemoCard>

<br />

<DemoCard>
    <Title>不可用状态 Disabled</Title>
    <Description>添加 <AntText Code>Disabled</AntText> 属性即可让按钮处于不可用状态，同时按钮样式也会改变。</Description>
    <Demo>
        <AntButton Type="primary">Primary</AntButton>
        <AntButton Type="primary" Disabled>
            Primary(Disabled)
        </AntButton>
        <br />
        <AntButton>Default</AntButton>
        <AntButton Disabled>Default(Disabled)</AntButton>
        <br />
        <AntButton Type="dashed">Dashed</AntButton>
        <AntButton Type="dashed" Disabled>
            Dashed(Disabled)
        </AntButton>
        <br />
        <AntButton Type="link">Link</AntButton>
        <AntButton Type="link" Disabled>
            Link(Disabled)
        </AntButton>
        <div style="padding:8px; background:rgb(190, 200, 200); width:400px ">
            <AntButton Ghost>Ghost</AntButton>
            <AntButton Ghost Disabled>
                Ghost(Disabled)
            </AntButton>
        </div>
    </Demo>
</DemoCard>

